<template>
    <!-- <div class="container"> -->
    <el-row>
        <!-- 左侧 -->
        <el-col :span="12">
            <section class="bg-white rounded-lg p-6 shadow-sm">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h2 class="text-lg font-medium">今日记录</h2>
                        <p class="text-gray-500 mt-1">{{ currentDate }}</p>
                    </div>
                </div>
                <el-row :gutter="20">
                    <el-col :span="7">
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <label class="block text-sm text-gray-500 mb-2">收缩压 (mmHg)</label>
                            <el-input v-model="record.systolic" type="number" class="w-full !h-12" placeholder="请输入" />
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <label class="block text-sm text-gray-500 mb-2">舒张压 (mmHg)</label>
                            <el-input v-model="record.diastolic" type="number" class="w-full !h-12" placeholder="请输入" />
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="p-4 bg-gray-50 rounded-lg">
                            <label class="block text-sm text-gray-500 mb-2">心率 (次/分)</label>
                            <el-input v-model="record.heartRate" type="number" class="w-full !h-12" placeholder="请输入" />
                        </div>
                    </el-col>
                </el-row>

                <div class="mt-6">
                    <el-button type="primary" class="w-full !h-12 !rounded-button whitespace-nowrap"
                        @click="saveRecord">
                        保存记录
                    </el-button>
                </div>
            </section>
            <section class="bg-white rounded-lg p-6 shadow-sm">
                <h2 class="text-lg font-medium mb-6">血压趋势</h2>
                <div ref="chartRef" class="w-full h-[300px]" style="width: 480px;"></div>
            </section>

        </el-col>
        <!-- 右侧 -->
        <el-col :span="12">
            <section class="bg-white rounded-lg p-6 shadow-sm mb-6">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h2 class="text-lg font-medium mb-4">最近记录</h2>
                    </div>
                    <el-button type="primary" text class="!rounded-button whitespace-nowrap" @click="addRecord">
                        查看全部
                        <el-icon class="ml-1">
                            <ArrowRight />
                        </el-icon>
                    </el-button>
                </div>
                <div class="space-y-4">
                    <div v-for="(item, index) in recentRecords" :key="index"
                        class="p-4 border border-gray-100 rounded-lg hover:border-primary/20 transition-colors"
                        style="border:1px solid #e5e7eb;">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-500">{{ item.time }}</span>
                            <el-button class="text-gray-400 !p-0 hover:text-red-500" @click="deleteRecord(index)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </div>
                        <el-row>
                            <el-col :span="7">
                                <div class="text-xl font-medium" :class="{ 'text-red-500': item.systolic >= 135 }">{{
                                    item.systolic }}</div>
                                <div class="text-sm text-gray-500">收缩压</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="text-xl font-medium">{{ item.diastolic }}</div>
                                <div class="text-sm text-gray-500">舒张压</div>
                            </el-col>
                            <el-col :span="7">
                                <div class="text-xl font-medium">{{ item.heartRate }}</div>
                                <div class="text-sm text-gray-500">心率</div>
                            </el-col>
                        </el-row>

                    </div>
                </div>
            </section>
            <section class="bg-white rounded-lg p-6 shadow-sm mb-6">
                <h2 class="text-lg font-medium mb-4">血压标准</h2>
                <div class="space-y-3 text-sm">
                    <div class="flex items-center gap-2 mb-4">
                        <span class="w-3 h-3 rounded-full bg-green-500"></span>
                        <span>正常: ≤120/80 mmHg</span>
                    </div>
                    <div class="flex items-center gap-2 mb-4">
                        <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
                        <span>警戒: 120-139/80-89 mmHg</span>
                    </div>
                    <div class="flex items-center gap-2 mb-4">
                        <span class="w-3 h-3 rounded-full bg-red-500"></span>
                        <span>偏高: ≥140/90 mmHg</span>
                    </div>
                </div>
            </section>
            <section class="bg-white rounded-lg p-6 shadow-sm mb-6">
                <h2 class="text-lg font-medium mb-4">温馨提示</h2>
                <div class="space-y-3 text-sm text-gray-600">
                    <p>1. 测量时请保持安静休息5分钟</p>
                    <p>2. 测量姿势要正确,手臂与心脏保持同一水平</p>
                    <p>3. 若发现异常数据请及时就医</p>
                    <p>4. 建议每天固定时间测量2-3次</p>
                </div>
            </section>
        </el-col>
    </el-row>
    <!-- </div> -->
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ArrowLeft, Share, Plus, Delete } from '@element-plus/icons-vue';
// import type { ECharts } from 'echarts';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';

const chartRef = ref();
let chart;

const currentDate = ref(new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
}));

const record = ref({
    systolic: '',
    diastolic: '',
    heartRate: ''
});

const recentRecords = ref([
    {
        time: '今天 09:30',
        systolic: 135,
        diastolic: 85,
        heartRate: 75
    },
    {
        time: '今天 07:30',
        systolic: 120,
        diastolic: 80,
        heartRate: 72
    }
]);

const goBack = () => {
    ElMessage.info('返回上一页');
};

const addRecord = () => {
    record.value = {
        systolic: '',
        diastolic: '',
        heartRate: ''
    };
};

const saveRecord = () => {
    if (!record.value.systolic || !record.value.diastolic || !record.value.heartRate) {
        ElMessage.warning('请填写完整数据');
        return;
    }
    ElMessage.success('保存成功');
};

const deleteRecord = (index) => {
    recentRecords.value.splice(index, 1);
    ElMessage.success('删除成功');
};

onMounted(() => {
    if (chartRef.value) {
        chart = echarts.init(chartRef.value);
        const option = {
            animation: false,
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['07:30', '09:30', '12:30', '15:30', '18:30', '21:30']
            },
            yAxis: {
                type: 'value',
                name: 'mmHg'
            },
            series: [
                {
                    name: '收缩压',
                    type: 'line',
                    data: [120, 135, 125, 130, 125, 128],
                    smooth: true,
                    lineStyle: {
                        color: '#4A90E2'
                    },
                    itemStyle: {
                        color: '#4A90E2'
                    }
                },
                {
                    name: '舒张压',
                    type: 'line',
                    data: [80, 85, 82, 84, 80, 82],
                    smooth: true,
                    lineStyle: {
                        color: '#91CC75'
                    },
                    itemStyle: {
                        color: '#91CC75'
                    }
                }
            ]
        };
        chart.setOption(option);
    }
});
</script >
<style lang="less" scoped>
.el-input :deep(.el-input__inner) {
    height: 48px;
    line-height: 48px;
    font-size: 18px;
    font-weight: 500;
}

.el-input :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
    background-color: white;
    padding: 0 16px;
}

/* 移除number类型输入框的上下箭头 */
.el-input :deep(.el-input__inner::-webkit-outer-spin-button),
.el-input :deep(.el-input__inner::-webkit-inner-spin-button) {
    -webkit-appearance: none;
    margin: 0;
}
.space-y-3 p{
    margin-bottom: 0.75rem;
}
.space-y-4 div{
    margin-bottom: 1rem;
}
</style>